<%--
  Created by IntelliJ IDEA.
<<<<<<< HEAD
  User: 蒸饭
  Date: 2020/10/7
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="<%=request.getContextPath()%>/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <link href="<%=request.getContextPath()%>/css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/foot.css" />
    <link href="<%=request.getContextPath()%>/css/index01.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/loading.css" rel="stylesheet" type="text/css">

    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script>
        function login(){
            if (document.getElementById("login").style.display==="none") {
                document.getElementById("login").style.display="block";
            }else {
                document.getElementById("login").style.display="none";
            }
        }
    </script>
</head>
<body style="background: #eee;">
<%@include file="../common/nav.jsp"%>
<div style="margin-left: 18%;display: flex">
    <!--    导航栏-->
    <div style="height: 600px;width: 10%;margin: 10px">
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a()">java</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a1()">python</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a2()">前端</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a3()" >c++</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a4()">mysql</button>

    </div>
    <div id="a1" style="height: 600px;width: 65%;background:white;margin:10px;padding: 20px;border-radius: 5px" >
        <div class="ques-section-card">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>

                <c:forEach begin="0" end="5" items="${java}" var="i" varStatus="ss">
                    <tr>
                        <td>${ss.count}</td>
                        <td>${i.usNickname}</td>
                        <td>${i.levelUlevel}</td>
                        <td>${i.levelUintegral}</td>
                        <td onclick="userinfo('${i.usNickname}')"><button data-toggle="modal" data-target="#myModal" onclick="">详细</button></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>



    </div>
    <div id="a2" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach begin="0" end="5" items="${python}" var="i" varStatus="ss">
                    <tr>
                        <td>${ss.count}</td>
                        <td>${i.usNickname}</td>
                        <td>${i.levelUlevel}</td>
                        <td>${i.levelUintegral}</td>
                        <td onclick="userinfo('${i.usNickname}')"><button data-toggle="modal" data-target="#myModal" onclick="">详细</button></td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>

    </div>
    <div id="a3" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach begin="0" end="5" items="${c}" var="i" varStatus="ss">
                    <tr>
                        <td>${ss.count}</td>
                        <td>${i.usNickname}</td>
                        <td>${i.levelUlevel}</td>
                        <td>${i.levelUintegral}</td>
                        <td onclick="userinfo('${i.usNickname}')"><button data-toggle="modal" data-target="#myModal" onclick="">详细</button></td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>


    </div>
    <div id="a4" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach begin="0" end="5" items="${web}" var="i" varStatus="ss">
                    <tr>
                        <td>${ss.count}</td>
                        <td>${i.usNickname}</td>
                        <td>${i.levelUlevel}</td>
                        <td>${i.levelUintegral}</td>
                        <td onclick="userinfo('${i.usNickname}')"><button data-toggle="modal" data-target="#myModal" onclick="">详细</button></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

    </div>
    <div id="a5" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach begin="0" end="5" items="${sql}" var="i" varStatus="ss">
                    <tr>
                        <td>${ss.count}</td>
                        <td>${i.usNickname}</td>
                        <td>${i.levelUlevel}</td>
                        <td>${i.levelUintegral}</td>
                        <td onclick="userinfo('${i.usNickname}')"><button data-toggle="modal" data-target="#myModal" onclick="">详细</button></td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>



    </div>


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">详细信息</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


</div>

<script>
    function userinfo(data) {
        console.log(data)
        $(".modal-body").text("")
        $.post("/yuezhi/rank/userinfo",{"nickname":data},function (data){
            $(".modal-body").append("<div>"+data.usNickname+"</div>" +
                "<div>"+data.usAdress+"</div>")
        })


    }
    function a(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="block"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"

    }
    function a1(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="block"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"

    }
    function a2(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="none"
        a2.style.display="block"
        a3.style.display="none"
        a4.style.display="none"

    }
    function a3(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="block"
        a4.style.display="none"

    }
    function a4(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="block"

    }
    // function a5(){
    //     let a = document.getElementById("a1");
    //     let a1 = document.getElementById("a2");
    //     let a2 = document.getElementById("a3");
    //     let a3 = document.getElementById("a4");
    //     let a4 = document.getElementById("a5");
    //
    //     a.style.display="none"
    //     a1.style.display="none"
    //     a2.style.display="none"
    //     a3.style.display="none"
    //     a4.style.display="none"
    //
    // }


</script>


<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js" ></script>
</body>
</body>
</html>